<template>
  <div>
    <div class="areaDialogC">
      <div class="areaDialogC-close" @click="closeView"></div>
      <div class="areaDialogC-top"></div>

      <div class="areaDialogC-contentC">
        <div class="areaDialogC-contentC-title">
          <div class="areaDialogC-contentC-title-itemC">
            <span>{{ showList ? '飞行漫游' : '漫游管理' }}</span>
            <div class="areaDialogC-contentC-title-itemC-line" />
          </div>
        </div>
        <div class="areaDialogC-contentC-line"></div>
        <!--      列表-->
        <div class="areaDialogC-contentC-listC" v-show="showList">
          <div class="areaDialogC-contentC-listC-add"
            @click="changePanel(false); canSave = true; roamLatNum = 0; drawRoam(1)">
            <div></div>
            <span>新增路线</span>
          </div>
          <div class="areaDialogC-contentC-listC-titleC">
            <span>名称</span>
            <span>操作</span>
          </div>
          <div class="areaDialogC-contentC-listC-list nav-tabs-scroll">
            <div class="areaDialogC-contentC-listC-itemC" v-for="(item, index) in localRoamData" :key="index">
              <div class="areaDialogC-contentC-listC-itemC-name">{{ item.name }}</div>
              <div class="areaDialogC-contentC-listC-itemC-btnC">
                <div @click="startPlayList(item, index)"></div>
                <div @click="startModify(item, index)"></div>
                <div @click="deleteRoamData(index)"></div>
              </div>
            </div>
          </div>
        </div>

        <div class="areaDialogC-contentC-modifyC" v-show="!showList">
          <div class="areaDialogC-contentC-modifyC-item">
            <div class="areaDialogC-contentC-modifyC-item-name">名称</div>
            <input class="areaDialogC-contentC-modifyC-item-input" v-model="romaObj.name" :disabled="isPlayList" />
          </div>
          <div class="areaDialogC-contentC-modifyC-item">
            <div class="areaDialogC-contentC-modifyC-item-name">锁定视角速度(倍速) (建议: {{ recommendConf.speed }})</div>
            <input class="areaDialogC-contentC-modifyC-item-input" v-model="romaObj.speed" :disabled="isModify" />
          </div>
          <div class="areaDialogC-contentC-modifyC-item">
            <div class="areaDialogC-contentC-modifyC-item-name">锁定视角角度 (建议: {{ recommendConf.angle }})</div>
            <input class="areaDialogC-contentC-modifyC-item-input" v-model="romaObj.angle" :disabled="isModify" />
          </div>
          <div class="areaDialogC-contentC-modifyC-item">
            <div class="areaDialogC-contentC-modifyC-item-name">锁定视角俯仰高度 (建议: {{ recommendConf.height }})</div>
            <input class="areaDialogC-contentC-modifyC-item-input" v-model="romaObj.height" :disabled="isModify" />
          </div>
          <div class="areaDialogC-contentC-modifyC-item areaDialogC-contentC-modifyC-areaHeight">
            <div class="areaDialogC-contentC-modifyC-item-name">内容</div>
            <textarea class="areaDialogC-contentC-modifyC-item-textArea areaDialogC-contentC-modifyC-areaHeight userFlex"
              style="resize: none" v-model="romaObj.content" :disabled="isPlayList" />
          </div>
        </div>

        <div class="areaDialogC-contentC-btnC" v-show="!showList && !isModify">
          <span @click="recordRoam">{{ !isPlay ? '开始漫游' : '结束漫游' }}</span>
          <span @click="changePanel(true)" v-show="!isPlay">取消</span>
        </div>

        <div class="areaDialogC-contentC-btnC" v-show="!showList && isModify">
          <span @click="updateModifyData(true)">保存</span>
          <span @click="updateModifyData(false)">取消</span>
        </div>

      </div>

    </div>
  </div>
</template>
<script>

import * as echarts from "echarts";
import {
  drawRoamSpeedMsg,
  recordRoamMsg,
  playRomaMsg,
  sendAreaDeviceMsg,
  sendRoamHeightMsg,
  sendRoamSpeedMsg, playCurrenRomaMsg,
  sendRoamClearMsg, sendRoamPitchMsg
} from "@/utils/UeMessageUtils";
import { sendToUeMsg } from "@/utils/UeMessageUtils";

export default {
  name: 'area-form',
  props: {
    panelValue: [String, Boolean],
    dataSource: {
      type: Object,
      default: () => ({
        areaName: '',
        remake: '',
        details: '',//描述
        color: '#ff0000',
      }),
    },
  },
  data() {
    return {
      // 建议配置
      recommendConf: {
        speed: 5, //速度
        angle: 15, //角度
        height: 500, //高度
      },
      roamLatNum: 0,//接受的漫游标点数量
      localRoamData: '',//当前保存的漫游数据
      romaObj: { 'name': '', 'speed': '', 'angle': '', 'height': '', 'content': '' },
      canSave: true,//是否可以保存漫游数据
      isPlay: false,//是否正在播放漫游
      isPlayList: false,//是否正在播放漫游列表
      isModify: false,//是否正在编辑漫游数据
      modifyPos: 0,//正在编辑的数据下标
      isRecord: false,//是否正在录制漫游
      showList: true,//列表展示
      model: {
        areaName: '',
        remake: '',
        color: '#ff0000',
      },
      rules: {
        areaName: [
          {
            required: true,
            message: '名称不能为空',
          },
        ],
        remake: [
          {
            required: true,
            message: '备注不能为空',
          },
        ],
      },
    };
  },
  mounted() {
    //接受漫游点位消息，超过两条保存点位数据
    this.$event.on('msg::roam', () => {
      this.roamLatNum += 1
    });
    this.localRoamData = JSON.parse(localStorage.getItem('localRoamData')) ? JSON.parse(localStorage.getItem('localRoamData')) : [];
    if (this.localRoamData.length <= 0) {
      sendRoamClearMsg(1)
    }
  },
  beforeDestroy() {
    this.$event.emit('close::marquee');
    recordRoamMsg(0)
  },
  watch: {
    panelValue() {
      this.closeView()
    },
    dataSource(val) {
      this.update(val);
    },
  },
  methods: {
    //面版显示
    changePanel(bool) {
      this.showList = bool
      if (bool) {
        sendToUeMsg({ roamHide: 1 })
        this.isModify = false
        this.isPlayList = false
        this.$event.emit('close::marquee');
      }
      recordRoamMsg(0)
      this.romaObj = { 'name': '', 'speed': '', 'angle': '', 'height': '', 'content': '' }
    },
    //编辑数据
    startModify(value, index) {
      this.modifyPos = index
      this.changePanel(false)
      this.romaObj = value
      this.isModify = true
    },
    //准备播放漫游列表
    startPlayList(value, index) {
      this.changePanel(false)
      this.romaObj = value
      this.isPlayList = true
    },
    //更新数据
    updateModifyData(bool) {
      if (bool) {
        this.localRoamData[this.modifyPos] = this.romaObj
        localStorage.setItem('localRoamData', JSON.stringify(this.localRoamData))
      }
      this.changePanel(true)
      this.romaObj = { 'name': '', 'speed': '', 'angle': '', 'height': '', 'content': '' }
    },
    //
    drawRoam(value) {
      recordRoamMsg(value)
    },
    //开始播放漫游
    recordRoam() {
      if (!this.isPlay) {
        //新增漫游路线时，超过两个标记点才能播放
        if (!this.isPlayList && this.roamLatNum <= 1) {
          this.$message.error('漫游标记点不能小于2个')
          return;
        }

        this.isPlay = true
        //如果未在录制漫游中
        if (this.romaObj.name == '') {
          this.$message.error('请输入漫游名称')
          return
        }
        if (this.romaObj.speed == '') {
          this.$message.error('请输入视角角度')
          return
        }

        if (this.romaObj.angle == '') {
          this.$message.error('请输入锁定视角角度')
          return
        }

        if (this.romaObj.height == '') {
          this.$message.error('请输入锁定视角俯仰角度')
          return
        }
        sendRoamSpeedMsg(this.romaObj.speed)
        sendRoamPitchMsg(this.romaObj.angle)
        sendRoamHeightMsg(this.romaObj.height)
        if (this.canSave && !this.isPlayList) {
          this.saveRoamData()
          this.canSave = false
        }
        if (this.isPlayList) {//是否是播放缓存数据
          playRomaMsg(this.romaObj.key)
        } else {
          var data = JSON.parse(localStorage.getItem('localRoamData')) ? JSON.parse(localStorage.getItem('localRoamData')) : [];
          var key = 0
          if (data && data.length > 0) {
            key = data[data.length - 1].key
          }
          playCurrenRomaMsg(key)
        }
        this.$event.emit('show::marquee', this.romaObj.content);
      } else {
        this.isPlay = false
        this.$event.emit('close::marquee');
        recordRoamMsg(0)
      }
    },
    //删除漫游数据
    deleteRoamData(index) {
      this.localRoamData.splice(index, 1)
      localStorage.setItem('localRoamData', JSON.stringify(this.localRoamData))
      if (this.localRoamData.length <= 0) {
        sendRoamClearMsg(1)
      }
    },
    //保存漫游数据
    saveRoamData() {
      var data = JSON.parse(localStorage.getItem('localRoamData')) ? JSON.parse(localStorage.getItem('localRoamData')) : [];
      var key = 0
      if (data && data.length > 0) {
        key = data[data.length - 1].key + 1
      }
      this.romaObj.key = key
      this.localRoamData.push(this.romaObj)
      localStorage.setItem('localRoamData', JSON.stringify(this.localRoamData))
    },
    //关闭界面
    closeView() {
      recordRoamMsg(0)
      this.$emit('close')
    },
  },

}
</script>
<style lang="scss">
@import "src/styles/common.scss";

.userFlex {
  scrollbar-width: none;
  /* firefox */
  -ms-overflow-style: none;
  /* IE 10+ */
  overflow-y: auto;
}

.userFlex::-webkit-scrollbar {
  display: none;
  /* Chrome Safari */
}

.areaDialogC {
  position: absolute;
  right: 20px;
  z-index: 99;
  top: 50%;
  width: 411px;
  height: 400px;
  display: flex;
  flex-direction: column;

  &-close {
    background-size: 100% 100%;
    background-image: url("@/assets/icon_close.png");
    width: 14px;
    height: 14px;
    position: absolute;
    top: 18px;
    right: 18px;
    z-index: 100;
    cursor: pointer;

    &:hover {
      opacity: 0.7;
    }
  }

  &-top {
    width: 80px;
    height: 10px;
    background-size: 100% 100%;
    background-image: url("@/assets/icon_dialog_part.png");
  }

  &-contentC {
    width: 100%;
    height: 390px;
    display: flex;
    position: relative;
    flex-direction: column;
    background: rgba(8, 32, 72, 0.71);
    opacity: 1;

    &-title {
      display: flex;
      flex-direction: row;

      &-itemC {
        cursor: pointer;
        display: flex;
        margin: 5px 16px 0px 16px;
        flex-direction: column;

        &:hover {
          opacity: 0.8;
        }

        span {
          display: block;
          height: 25px;
          font-size: 14px;
          font-family: PingFang SC-Medium, PingFang SC;
          font-weight: 500;
          color: #FFFFFF;
          line-height: 25px;
        }

        &-line {
          height: 2px;
          background: #FFFFFF;
          border-radius: 0px 0px 0px 0px;
          opacity: 1;
        }
      }
    }

    &-line {
      width: 100%;
      height: 1px;
      opacity: 1;
      background: rgba(98, 183, 255, 0.2);
    }

    &-btnC {
      display: flex;
      position: absolute;
      flex-direction: row;
      justify-content: center;
      bottom: 30px;
      width: 100%;

      span {
        cursor: pointer;
        display: block;
        width: 86px;
        height: 36px;
        border-radius: 0px 0px 0px 0px;
        opacity: 1;
        text-align: center;
        font-size: 12px;
        font-family: PingFang HK-Regular, PingFang HK;
        font-weight: 400;
        color: #FFFFFF;
        margin: 0px 16px;
        line-height: 36px;

        &:hover {
          opacity: 0.8;
        }
      }

      :nth-child(1) {
        background: rgba(221, 248, 255, 0.5);
      }

      :nth-child(2) {
        background: rgba(0, 230, 255, 0.7);
      }
    }

    &-listC {
      display: flex;
      flex-direction: column;

      &-add {
        margin-left: 16px;
        margin-top: 10px;
        width: 130px;
        height: 42px;
        background: rgba(98, 183, 255, 0.2);
        opacity: 1;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        &:hover {
          opacity: 0.8;
        }

        >div {
          width: 18px;
          height: 18px;
          background-size: 100% 100%;
          background-image: url("@/assets/icon_roma_add.png");
        }

        >span {
          margin-left: 5px;
          display: block;
          height: 42px;
          font-size: 12px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 42px;
        }
      }

      &-titleC {
        margin-top: 10px;
        margin-left: 16px;
        width: 376px;
        height: 44px;
        display: flex;
        flex-direction: row;
        background: rgba(98, 183, 255, 0.2);
        border-radius: 0px 0px 0px 0px;
        opacity: 1;


        >span {
          display: block;
          height: 44px;
          font-size: 12px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 44px;
        }

        :nth-child(1) {
          width: 58%;
          padding-left: 2%;
        }

        :nth-child(2) {
          width: 40%;
          text-align: center;
        }
      }

      &-list {
        display: flex;
        flex-direction: column;
        margin-left: 16px;
        width: 376px;
        overflow-y: auto;
        height: 240px;
      }

      &-itemC {
        display: flex;
        flex-direction: row;
        height: 36px;
        border-bottom: 1px solid rgba(98, 183, 255, 0.2);

        &-name {
          width: 58%;
          padding-left: 2%;
          height: 36px;
          font-size: 12px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.6);
          line-height: 36px;
        }

        &-btnC {
          width: 40%;
          display: flex;
          flex-direction: row;
          justify-content: center;
          align-items: center;

          >div {
            cursor: pointer;
            width: 16px;
            height: 16px;
            background-size: 100% 100%;
          }

          :nth-child(1) {
            cursor: pointer;
            background-image: url("@/assets/icon_roma_fly.png");

            &:hover {
              opacity: 0.8;
            }
          }

          :nth-child(2) {
            cursor: pointer;
            margin-left: 22px;
            margin-right: 22px;
            background-image: url("@/assets/icon_roma_modify.png");

            &:hover {
              opacity: 0.8;
            }
          }

          :nth-child(3) {
            cursor: pointer;
            background-image: url("@/assets/icon_roma_del.png");

            &:hover {
              opacity: 0.8;
            }
          }
        }
      }

    }

    &-modifyC {
      display: flex;
      margin-left: 16px;
      flex-direction: column;
      width: 375px;
      height: 136px;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      margin-top: 16px;
      border-top: 1px solid rgba(98, 183, 255, 0.2);
      border-right: 1px solid rgba(98, 183, 255, 0.2);

      &-areaHeight {
        min-height: 120px;
        max-height: 120px;
      }

      &-item {
        display: flex;
        flex-direction: row;
        height: 30px;
        border-bottom: 1px solid rgba(98, 183, 255, 0.2);

        &-name {
          min-width: 140px;
          max-width: 140px;
          padding-left: 10px;
          height: 30px;
          align-items: center;
          font-size: 12px;
          border-left: 1px solid rgba(98, 183, 255, 0.2);
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: rgba(255, 255, 255, 0.6);
          line-height: 30px;
        }


        &-input {
          background-color: transparent;
          width: 224px;
          height: 30px;
          text-align: center;
          border: 0px solid rgba(98, 183, 255, 0.2);
          border-left: 1px solid rgba(98, 183, 255, 0.2);
          font-size: 12px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
          line-height: 30px;
        }

        &-textArea {
          background-color: transparent;
          width: 100%;
          border: 0px solid rgba(98, 183, 255, 0.2);
          border-left: 1px solid rgba(98, 183, 255, 0.2);
          font-size: 12px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #FFFFFF;
        }
      }
    }
  }
}

@media screen and (min-width: 1000px) and (max-width: 3000px) {
  $width_2k: 1920;
  $height_2k: 1080;
  $width: 4000;
  $height: 1486;
  $unit: px;

  @function calWidth_2k($pixel) {
    @return $width_2k*$pixel/$width;
  }

  @function calHeight_2k($pixel) {
    @return $pixel/1.8*2.7;
  }

  @function calFont_2k($pixel) {
    @return $height_2k*$pixel/$height;
  }

  .areaDialogC {
    right: calHeight_2k(20px);
    width: calHeight_2k(411px);
    height: calHeight_2k(400px);

    &-close {
      width: calHeight_2k(14px);
      height: calHeight_2k(14px);
      top: calHeight_2k(18px);
      right: calHeight_2k(18px);

    }

    &-top {
      width: calHeight_2k(80px);
      height: calHeight_2k(10px);
    }

    &-contentC {
      height: calHeight_2k(390px);

      &-title {

        &-itemC {
          margin: calHeight_2k(5px) calHeight_2k(16px) calHeight_2k(0px) calHeight_2k(16px);


          span {
            height: calHeight_2k(25px);
            line-height: calHeight_2k(25px);
          }

          &-line {
            height: calHeight_2k(2px);
          }
        }
      }

      &-line {}

      &-btnC {
        bottom: calHeight_2k(30px);

        span {
          width: calHeight_2k(86px);
          height: calHeight_2k(36px);
          margin: 0px calHeight_2k(16px);
          line-height: calHeight_2k(36px);

        }

      }

      &-listC {

        &-add {
          margin-left: calHeight_2k(16px);
          margin-top: calHeight_2k(10px);
          width: calHeight_2k(130px);
          height: calHeight_2k(42px);


          >div {
            width: calHeight_2k(18px);
            height: calHeight_2k(18px);
          }

          >span {
            margin-left: calHeight_2k(5px);
            height: calHeight_2k(42px);
            line-height: calHeight_2k(42px);
          }
        }

        &-titleC {
          margin-top: calHeight_2k(10px);
          margin-left: calHeight_2k(16px);
          width: calHeight_2k(376px);
          height: calHeight_2k(44px);


          >span {
            height: calHeight_2k(44px);
            line-height: calHeight_2k(44px);
          }

        }

        &-list {
          margin-left: calHeight_2k(16px);
          width: calHeight_2k(376px);
          height: calHeight_2k(240px);
        }

        &-itemC {
          height: calHeight_2k(36px);

          &-name {
            height: calHeight_2k(36px);
            line-height: calHeight_2k(36px);
          }

          &-btnC {

            >div {
              width: calHeight_2k(16px);
              height: calHeight_2k(16px);
            }


            :nth-child(2) {
              margin-left: calHeight_2k(22px);
              margin-right: calHeight_2k(22px);

            }

          }
        }

      }

      &-modifyC {
        margin-left: calHeight_2k(16px);
        width: calHeight_2k(375px);
        height: calHeight_2k(136px);
        margin-top: calHeight_2k(16px);

        &-areaHeight {
          min-height: calHeight_2k(120px);
          max-height: calHeight_2k(120px);
        }

        &-item {
          height: calHeight_2k(30px);

          &-name {
            min-width: calHeight_2k(140px);
            max-width: calHeight_2k(140px);
            padding-left: calHeight_2k(10px);
            height: calHeight_2k(30px);
            line-height: calHeight_2k(30px);
          }

          &-input {
            width: calHeight_2k(224px);
            height: calHeight_2k(30px);
            line-height: calHeight_2k(30px);
          }
        }
      }
    }
  }

}
</style>
